<template>
    <div>

        <!-- 结算汇总单 -->
        <div class="container">
            <!-- 表单 -->
            <el-form :inline="true" :model="formList" class="ticketForm" id="summarySheet">
                <el-form-item label="结算日期">
                    <el-date-picker type="date" size="mini" class="minipt"
                                    v-model="formList.startDate" value-format="yyyy-MM-dd"></el-date-picker>
                    至
                    <el-date-picker type="date" size="mini" class="minipt"
                                    v-model="formList.endDate" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="线路" class="minipt">
                    <el-autocomplete v-model="formList.roadname" size="mini" class="inp"
                                     :fetch-suggestions="querySearchendroads">
                    </el-autocomplete>
                </el-form-item>
                <el-form-item label="汇总单号">
                    <el-input size="mini" v-model="formList.billsumno" class="inp"></el-input>
                </el-form-item>
                <el-form-item label="运营单位">
                    <el-autocomplete v-model="formList.ccustom" size="mini" class="inp"
                                     :fetch-suggestions="querySearchComp">
                        <template slot-scope="{ item }">
                            <div>[{{ item.code }}] {{ item.value }}</div>
                        </template>
                    </el-autocomplete>
                </el-form-item>
                <el-form-item label="车牌号">
                    <el-autocomplete v-model="formList.carno" size="mini" class="inp"
                                     :fetch-suggestions="querySearchCarNum">
                    </el-autocomplete>
                </el-form-item>
                <el-form-item label="单据" class="minisel">
                    <el-select size="mini" v-model="formList.billstaus">
                        <el-option value="" label="不限">不限</el-option>
                        <el-option value="0" label="正常">正常</el-option>
                        <el-option value="1" label="已作废">已作废</el-option>
                    </el-select>
                </el-form-item>

                <button class="check-btn rf" type="button" @click="reflash">
                    <img src="../../assets/imgs/operation_btn_icon_chongzhi_default.png" alt="" class="btn-img">重置
                </button>
                <button class="check-btn rf" type="button" @click="check">
                    <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询
                </button>

                <!--<button @click="xianyin">显隐列</button>-->

            </el-form>

            <!-- 表格栏 -->
            <el-row>
                <el-col :span="24">
                    <avue-crud key="table" :data="banTable[0].data" :option="banTable[0].option" @size-change="sizeChange" :page="this.banTable[0].page" @current-change="banTablePage">
                    </avue-crud>
                </el-col>
            </el-row>

            <!-- 分页 -->
            <!--<div class="pagination">-->
            <!--<el-pagination-->
            <!--:page-sizes="[100, 200, 300, 400]"-->
            <!--:page-size="100"-->
            <!--layout="total, sizes, prev, pager, next, jumper"-->
            <!--:total="400">-->
            <!--</el-pagination>-->
            <!--</div>-->
        </div>
    </div>
</template>
<script>
    import "../../assets/js/jquery.js";
    import FormData from "../../components/common/form";
    import TableData from "../../components/common/tableData";
    import qs from "qs";

    export default {
        data() {
            return {
                banTable: [
                    {
                        page: {
                            pageSizes: [10,30,100,200],
                            total: "",
                            currentPage: 1,
                            pageSize: 10,
                        },
                        data: [],
                        option: {
                            page: true,
                            sumText:'合计',
                            border:true,
                            stripe: true,
                            menu: false,
                            columnBtn: true,
                            index: true,
                            showSummary: true,
                            highlightCurrentRow: true,
                            height:600,
                            align:'center',
                            menuAlign: "center",
                            column: [

                            ],
                        }
                    }
                ],

                formList: {
                    startDate: "",
                    endDate: "",
                    roadname: "",
                    billsumno: "",
                    ccustom: "",
                    carno: "",
                    billstaus: "",
                },
                tableData: [],
                roadlist: "",
                compList: "",
                carNumList: "",
                roadsid: "",
                ccustomid: "",

            };
        },
        methods: {
            //行数
            sizeChange(val){
                this.banTable[0].page.pageSize=val;
                this.getbillsumlist();
            },
            //页码
            banTablePage(val){
                this.banTable[0].page.currentPage=val;
                this.getbillsumlist();
            },
            //
            xianyin(){
                this.$refs.table.columnBox = true;
            },

            createFilter(queryString) {
                return arr => {
                    return arr.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
                };
            },
            //线路自动补全
            querySearchendroads(queryString, cb) {
                var arr = this.roadlist;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //线路请求
            loadRoads() {
                var arr = [];
                this.$http
                    .post("/sch/data/line/listWithSpell")
                    .then(data => {
                        for (var e of data.data) {
                            arr.push({value: e.name, prop: e.id});
                        }
                        console.log(arr);
                    });
                return arr;
            },
            //营运单位自动补全
            querySearchComp(queryString, cb) {
                var arr = this.compList;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //营运单位请求
            loadComp() {
                var arr = [];
                this.$http
                    .post("/sch/data/bus_company/listWithSpell")
                    .then(data => {
                        for (var c of data.data) {
                            arr.push({value: c.name, prop: c.id, code: c.code});
                        }
                        console.log(arr);
                    });
                return arr;
            },
            // 车牌自动补全
            querySearchCarNum(queryString, cb) {
                var arr = this.carNumList;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //车牌请求
            loadCarNum() {
                var arr = [];
                this.$http
                    .post("/sch/data/bus_vehicle/listWithSpell")
                    .then(data => {
                        for (var c of data.data) {
                            arr.push({value: c.vehi_no});
                        }
                    });
                return arr;
            },
            //获取列表请求
            getbillsumlist(){
                this.banTable[0].data = [];
                this.$http
                    .post("/fin/balance/sum/list",
                        qs.stringify({
                            rows:this.banTable[0].page.pageSize,
                            page:this.banTable[0].page.currentPage,
                        })
                    )
                    .then(data => {
                        console.log(data.data.list);
                        this.banTable[0].page.total = data.data.totalRow;
                        this.banTable[0].page.currentPage = data.data.pageNumber;
                        for (var item of data.data.list) {
                            this.banTable[0].data.push({
                                billno: item.no,
                                jiesuandate: item.gather_date,
                                billstau: item.no,
                                customsname: item.custnames,
                                carno: item.vehinos,
                                linename: item.line_names,
                                fabanbill: item.bill_count,
                                fabanbill_ot: item.bill_count_ot,
                                people: item.people_count,
                                people_ot: item.people_count_ot,
                                pricesum: item.tk_price_sum,
                                pricesum_ot: item.tk_price_sum_ot,
                                zhanwufei: item.fee_zhanwu,
                                dailifei: item.fee_daili,
                                fabanfei: item.fee_faban,
                                other: item.fee_other,
                                koufei_sum: item.no,
                                jiesuantype: item.jstype,
                                actualpay: item.actual_pay,
                                jiesuanuser: item.create_oper_no,
                                jiesuantime: item.create_time,
                                zuofeiuser: item.del_oper_no,
                                zuofeitime: item.update_time,
                            })
                        }
                        console.log(this.banTable[0].data);
                    })
            },

            //重置
            reflash(){
                this.banTable[0].data = [];

                this.$http
                    .post("/fin/balance/sum/list",
                        qs.stringify({
                            page: 1,
                            rows: 30,
                        })
                    )
                    .then(data => {
                        console.log(data.data.list);
                        this.banTable[0].page.total = data.data.totalRow;
                        this.banTable[0].page.currentPage = data.data.pageNumber;
                        for (var item of data.data.list) {
                            this.banTable[0].data.push({
                                billno: item.no,
                                jiesuandate: item.gather_date,
                                billstau: item.no,
                                customsname: item.custnames,
                                carno: item.vehinos,
                                linename: item.line_names,
                                fabanbill: item.bill_count,
                                fabanbill_ot: item.bill_count_ot,
                                people: item.people_count,
                                people_ot: item.people_count_ot,
                                pricesum: item.tk_price_sum,
                                pricesum_ot: item.tk_price_sum_ot,
                                zhanwufei: item.fee_zhanwu,
                                dailifei: item.fee_daili,
                                fabanfei: item.fee_faban,
                                other: item.fee_other,
                                koufei_sum: item.no,
                                jiesuantype: item.jstype,
                                actualpay: item.actual_pay,
                                jiesuanuser: item.create_oper_no,
                                jiesuantime: item.create_time,
                                zuofeiuser: item.del_oper_no,
                                zuofeitime: item.update_time,
                            })
                        }
                        console.log(this.banTable[0].data);
                    })
            },
            //查询操作
            check(){
                this.banTable[0].data = [];
                this.$http
                    .post("/fin/balance/sum/list",
                        qs.stringify({
                            filterRules: '[{"field":"gather_date","op":"dge","value":"'+this.formList.startDate+'"},' +
                            '{"field":"gather_date","op":"dle","value":"'+this.formList.endDate+'"},' +
                            '{"field":"line_names","op":"cn","value":"'+this.formList.roadname+'"},' +
                            '{"field":"no","op":"eq","value":"'+this.formList.billsumno+'"},' +
                            '{"field":"custnames","op":"cn","value":"'+this.formList.ccustom+'"},' +
                            '{"field":"vehinos","op":"cn","value":"'+this.formList.carno+'"},' +
                            '{"field":"del_flag","op":"eq","value":"'+this.formList.billstaus+'"}]',
                            rows:this.banTable[0].page.pageSize,
                            page:this.banTable[0].page.currentPage,
                        })
                    )
                    .then(data => {
                        console.log(data.data.list);
                        this.banTable[0].page.total = data.data.totalRow;
                        this.banTable[0].page.currentPage = data.data.pageNumber;
                        for (var item of data.data.list) {
                            this.banTable[0].data.push({
                                billno: item.no,
                                jiesuandate: item.gather_date,
                                billstau: item.no,
                                customsname: item.custnames,
                                carno: item.vehinos,
                                linename: item.line_names,
                                fabanbill: item.bill_count,
                                fabanbill_ot: item.bill_count_ot,
                                people: item.people_count,
                                people_ot: item.people_count_ot,
                                pricesum: item.tk_price_sum,
                                pricesum_ot: item.tk_price_sum_ot,
                                zhanwufei: item.fee_zhanwu,
                                dailifei: item.fee_daili,
                                fabanfei: item.fee_faban,
                                other: item.fee_other,
                                koufei_sum: item.no,
                                jiesuantype: item.jstype,
                                actualpay: item.actual_pay,
                                jiesuanuser: item.create_oper_no,
                                jiesuantime: item.create_time,
                                zuofeiuser: item.del_oper_no,
                                zuofeitime: item.update_time,
                            })
                        }
                        console.log(this.banTable[0].data);
                    })
            },
            //表头栏
            tableCreate() {
                this.banTable[0].option.column.push(
                    {
                        label: "单号",
                        prop: "billno",
                        width: "120px"

                    },
                    {
                        label: "结算日期",
                        prop: "jiesuandate",
                        width: "100px"
                    },
                    {
                        label: "状态",
                        prop: ""
                    },
                    {
                        label: "营运单位",
                        prop: "customsname",
                        width: "100px"
                    },
                    {
                        label: "车牌号",
                        prop: "carno",
                        width: "100px"
                    },
                    {
                        label: "线路",
                        prop: "linename",
                        width: "120px"
                    },
                    {
                        label: "发班单(正)",
                        prop: "fabanbill",
                        width: "65px"
                    },
                    {
                        label: "发班单(加)",
                        prop: "fabanbill_ot",
                        width: "65px"
                    },
                    {
                        label: "人数(正)",
                        prop: "people",
                        width: "60px"
                    },
                    {
                        label: "人数(加)",
                        prop: "people_ot",
                        width: "60px"
                    },
                    {
                        label: "票款(正)",
                        prop: "pricesum",
                        width: "60px"
                    },
                    {
                        label: "票款(加)",
                        prop: "pricesum_ot",
                        width: "60px"
                    },
                    {
                        label: "站务费",
                        prop: "zhanwufei",
                        width: "70px"
                    },
                    {
                        label: "代理费",
                        prop: "dailifei",
                        width: "70px"
                    },
                    {
                        label: "发班费",
                        prop: "fabanfei",
                        width: "70px"
                    },
                    {
                        label: "其他扣费",
                        prop: "other",
                        width: "80px"
                    },
                    {
                        label: "扣费合计",
                        prop: "koufei_sum",
                        width: "80px"
                    },
                    {
                        label: "结算方式",
                        prop: "jiesuantype",
                        width: "70px"
                    },
                    {
                        label: "实付",
                        prop: "actualpay",
                        width: "75px"
                    },
                    {
                        label: "结算员",
                        prop: "jiesuanuser",
                        width: "100px"
                    },
                    {
                        label: "结算时间",
                        prop: "jiesuantime",
                        width: "160px"
                    },
                    {
                        label: "作废操作员",
                        prop: "zuofeiuser",
                        width: "100px"
                    },
                    {
                        label: "作废时间",
                        prop: "zuofeitime",
                        width: "160px"
                    },
                );
            },


        },
        watch: {
            //侦听线路名，获取其id
            "formList.roadname": {
                handler(curVal, oldVal){
                    console.log(curVal, oldVal);
                    if (this.formList.roadname == "") {
                        this.roadsid = "";
                    } else {
                        for (var item of this.roadlist) {
                            if (this.formList.roadname == item.value) {
                                this.roadsid = item.prop;
                                break;
                            } else {
                                this.roadsid = "";
                            }
                        }
                        console.log(this.roadsid)
                    }
                },
                deep: true
            },
            //侦听营运单位，并转换id
            "formList.ccustom": {
                handler(curVal, oldVal){
                    console.log(curVal, oldVal);
                    if (this.formList.ccustom == "") {
                        this.ccustomid = "";
                    } else {
                        for (var item of this.compList) {
                            if (this.formList.ccustom == item.value) {
                                this.ccustomid = item.prop;
                                break;
                            } else {
                                this.ccustomid = "";
                            }
                        }
                        console.log(this.ccustomid)
                    }
                },
                deep: true
            },
        },

        mounted(){
            this.compList = this.loadComp();
            this.carNumList = this.loadCarNum();
            this.roadlist = this.loadRoads();
            this.tableCreate();
            this.getbillsumlist();
        },

    }
</script>
<style scoped src="../../assets/css/check/summarySheet.css">
    .el-date-editor.el-input {
        width: 150px !important;
    }

    .check_btn, .check_btn:hover {
        background: #009688;
        border-radius: 5px;
        border: 0px;
        color: white;
        cursor: pointer;
        padding: 10px 20px;
    }

    .form_btn {
        float: right;
        margin-right: 20px;
    }
</style>